<!doctype html>
<html>
    <head>
        <title>HT for Web 3D 手册</title>
        <meta charset="UTF-8">    
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css"> 
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white; 
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {	
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;	
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }                        
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;                
            }            
            .logo{
                vertical-align: middle;
            }

        </style>        
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }
                
                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];
                    
                    // a small hack to make it work on android
                    iframe.ontouchstart = func;
                    
                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }   
            }
        </script>    
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT for Web 3D 手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_overview">概述</a><ul><li><a href="#ref_engine">底层引擎</a></li><li><a href="#ref_tool">建模设计器</a></li><li><a href="#ref_support">浏览器支持</a></li></ul></li><li><a href="#ref_basic">3D基础</a><ul><li><a href="#ref_coordinate">3D坐标系</a><ul><li><a href="#ref_2drelation">2D坐标关系</a></li><li><a href="#ref_3dcoordinate">3D坐标函数</a></li><li><a href="#ref_3drotation">3D旋转函数</a></li><li><a href="#ref_3dabbreviation">3D简写函数</a></li></ul></li><li><a href="#ref_projection">3D投影</a><ul><li><a href="#ref_perspective">透视投影</a></li><li><a href="#ref_orthographic">正交投影</a></li></ul></li></ul></li><li><a href="#ref_3dmodel">3D模型</a><ul><li><a href="#ref_cube">六面体</a>  </li><li><a href="#ref_shape3d">shape3d</a>  </li><li><a href="#ref_edge">ht.Edge</a>      </li><li><a href="#ref_shape">ht.Shape</a> </li></ul></li><li><a href="#ref_other">其他参数</a><ul><li><a href="#ref_whole">整体</a></li><li><a href="#ref_label">文字</a></li><li><a href="#ref_note">标注</a></li><li><a href="#ref_icons">图标</a>    </li><li><a href="#ref_host">吸附</a></li></ul></li><li><a href="#ref_3dview">3D组件</a><ul><li><a href="#ref_viewbasic">组件基础</a></li><li><a href="#ref_light">灯光设置</a></li><li><a href="#ref_gridaxis">网格轴线</a></li><li><a href="#ref_3dinteraction">3D交互</a><ul><li><a href="#ref_interactionmode">交互模式</a><ul><li><a href="#ref_defaultmode">默认模式</a></li><li><a href="#ref_firstpersonmode">第一人称模式</a></li></ul></li><li><a href="#ref_interactionfunc">交互函数</a></li><li><a href="#ref_switch">交互开关</a></li><li><a href="#ref_keyboard">键盘操作</a>        </li><li><a href="#ref_edit">图元编辑</a></li><li><a href="#ref_interactionlistener">交互监听</a></li><li><a href="#ref_collision">碰撞检测</a></li></ul></li><li><a href="#ref_selection">选中状态</a></li><li><a href="#ref_filter">过滤器</a><ul><li><a href="#ref_selectable">选择过滤器</a></li><li><a href="#ref_visible">可见过滤器</a></li><li><a href="#ref_movable">移动过滤器</a></li><li><a href="#ref_rotatable">旋转过滤器</a></li><li><a href="#ref_scalable">改变大小过滤器</a></li></ul></li><li><a href="#ref_export">导出</a></li></ul></li></ul>

<hr/>

<div id="ref_overview"></div>

<h2>概述</h2>

<div id="ref_engine"></div>

<h3>底层引擎</h3>

<p><code>HT</code>提供了基于<a href="http://www.khronos.org/webgl/">WebGL</a>的<code>3D</code>技术的图形组件<code>ht.graph3d.Graph3dView</code>，
<code>WebGL</code>基于<a href="http://www.khronos.org/opengles/">OpenGL ES 2.0</a>图形接口，因此<code>WebGL</code>属于底层的图形<code>API</code>接口，
二次开发还是有很高的门槛，<code>HT</code>的<code>Graph3dView</code>组件通过对<code>WebGL</code>底层技术的封装，与<code>HT</code>其他组件一样，
基于<code>HT</code>统一的<code>DataModel</code>数据模型来驱动图形显示，极大降低了<code>3D</code>图形技术开发的门槛，在熟悉<code>HT</code>数据模型基础上，
一般程序员只需要<code>1</code>个小时的学习即可上手<code>3D</code>图形开发。</p>

<div id="ref_tool"></div>

<h3>建模设计器</h3>

<p>同时<code>HT</code>提供了强大的完全基于<code>HTML5</code>技术<code>3D</code>图形建模设计器，用户无需编码即可快速可视化搭建各种<code>3D</code>场景，
可以说<code>HT</code>的<code>3D</code>开发模式完全打破了传统<code>3D</code>开发模式，绝大部分应用不再需要依赖精通<a href="http://www.autodesk.com/products/autodesk-3ds-max/overview">3ds Max</a>
或<a href="http://www.autodesk.com/products/autodesk-maya/overview">Maya</a>的专业<code>3D</code>设计师来建模，
也不需要整合<a href="http://unity3d.com/">Unity3d</a>等引擎做图形渲染，<code>HT</code>一站式的提供了从建模到渲染，包括和<code>2D</code>组件呈现和数据融合的一站式解决方案。</p>

<div id="ref_support"></div>

<h3>浏览器支持</h3>

<p><code>WebGL</code>技术已被大部分最新浏览器支持，<a href="http://caniuse.com/webgl">caniuse.com/webgl</a>网站维护着最新桌面和移动浏览器对<code>WebGL</code>支持情况。
通过<a href="http://get.webgl.org/">get.webgl.org</a>可检测访问的浏览器是否支持<code>WebGL</code>。</p>

<p>目前<code>Chrome</code>、<code>Firefox</code>、<code>Safari</code>和<code>Opera</code>的桌面也移动终端版本都已经支持<code>WebGL</code>标准，
采用<code>iOS</code>系统需要<code>iOS8</code>及以上版本，采用<code>IE</code>浏览器须<code>IE11</code>及以上版本才支持<code>WebGL</code>，
不管选择哪种类型浏览器，我们建议尽量采用最新版本。</p>

<p>如果你一定要使用<code>IE6</code>，<code>IE7</code>和<code>IE8</code>等老版IE浏览器，或者因采用<code>HT for Web 3D</code>，而老机器无法升级到<code>IE11</code>，则可以考虑安装
<a href="http://www.chromium.org/developers/how-tos/chrome-frame-getting-started/chrome-frame-faq#TOC-For-Developers">Google Chrome Frame</a>插件，
在页面嵌入以下<code>Tag</code>代码片段，该页面就会采用<code>Chrome</code>来渲染。</p>

<pre><code>&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;chrome=1&quot;&gt; </code></pre>

<p>使用<code>Google Chrome Frame</code>还需要注意一下几点：</p>

<ul><li><code>Google Chrome Frame</code>不支持直接从本地<code>local file</code>方式打开页面，必须把页面部署到<code>Web</code>服务器发布方式打开</li><li><code>Google Chrome Frame</code>不支持64位的浏览器：<a href="http://www.chromium.org/developers/how-tos/chrome-frame-getting-started/chrome-frame-faq#TOC-Does-Google-Chrome-Frame-work-on-64-bit-IE-">Currently, 64-bit versions of IE are not supported. It&#39;s worth pointing out that 32-bit IE is the default on 64-bit Windows 7.</a></li><li><code>Google Chrome Frame</code>不支持<code>iframe</code>方式： <a href="http://stackoverflow.com/questions/2465322/opening-an-iframe-for-ie-while-using-chrome-frame">At this point ChromeFrame only supports the meta tag detection on top level URLs.</a></li></ul>

<p>可采用嵌入<code>OBJECT</code>元素的<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome_frame/host.html">解决方案</a>，绕开<code>Google Chrome Frame</code>不支持<code>iframe</code>的问题    </p>

<pre><code>&lt;OBJECT ID=&quot;ChromeFrame&quot; WIDTH=500 HEIGHT=500 CODEBASE=&quot;http://yourdomain/yourproject/&quot;
        CLASSID=&quot;CLSID:E0A900DF-9611-4446-86BD-4B1D47E7DB2A&quot;&gt;
    &lt;PARAM NAME=&quot;src&quot; VALUE=&quot;http://yourdomain/yourproject/&quot;&gt;
    &lt;embed ID=&quot;ChromeFramePlugin&quot; WIDTH=500 HEIGHT=500 NAME=&quot;ChromeFrame&quot;
        SRC=&quot;http://yourdomain/yourproject/&quot; TYPE=&quot;application/chromeframe&quot;&gt;
    &lt;/embed&gt;
&lt;/OBJECT&gt;</code></pre>

<p><code>Google Chrome Frame</code>将于<code>2014</code>年<code>1</code>月停止支持和更新，目前<code>Google Chrome Frame</code>以发展到<code>31</code>的版本，
这个版本已满足<code>HT</code>的<code>2D</code>和<code>3D</code>所需的<code>Canvas</code>功能，因此<code>HT</code>的客户可以放心采用<code>Google Chrome Frame</code>解决老<code>IE</code>问题。
其他问题可参考<code>Google Chrome Frame</code>的<a href="http://www.chromium.org/developers/how-tos/chrome-frame-getting-started">Developer Guide</a>
和<a href="http://www.chromium.org/developers/diagnostics/gcf_troubleshooting">Troubleshooting</a></p>

<p><iframe src="examples/example_3droom.html" style="height:400px"></iframe></p>

<div id="ref_basic"></div>

<hr/>

<h2>3D基础</h2>

<div id="ref_coordinate"></div>

<h3>3D坐标系</h3>

<p><code>HT</code>的三维坐标系由<code>x</code>，<code>y</code>和<code>z</code>三个轴线构成，<code>x</code>轴正方向朝右，<code>y</code>轴正方向朝上，<code>z</code>轴正方向朝向屏幕外。
<code>HT</code>系统的旋转采用<a href="http://en.wikipedia.org/wiki/Right-hand_rule">右手螺旋法则</a>。</p>

<p><img src=""></p>

<div id="ref_2drelation"></div>

<h4>2D坐标关系</h4>

<p><code>Graph3dView</code>的<code>3D</code>坐标系与<code>GraphView</code>的<code>2D</code>坐标系既有关联又有差异，<code>2D</code>坐标系的<code>x</code>轴与<code>3D</code>坐标系的<code>x</code>轴对应，
<code>2D</code>坐标系的<code>y</code>轴与<code>3D</code>坐标系的<code>z</code>轴对应，<code>2D</code>坐标系的<code>xy</code>屏幕面相当于<code>3D</code>坐标系的<code>xz</code>面。</p>

<p>例如<code>Node#getPosition()</code>返回<code>{x: 100, y: 200}</code>，则代表：</p>

<ul><li><code>2D</code>坐标系<code>x</code>轴为<code>100</code>，<code>y</code>轴为<code>200</code></li><li><code>3D</code>坐标系<code>x</code>轴为<code>100</code>，<code>z</code>轴为<code>200</code></li></ul>

<p>例如<code>Node#getSize()</code>返回<code>{width: 300, height: 400}</code>，则代表：</p>

<ul><li><code>2D</code>坐标系<code>x</code>轴上长度<code>300</code>，<code>y</code>轴上长度<code>400</code></li><li><code>3D</code>坐标系<code>x</code>轴上长度<code>300</code>，<code>z</code>轴上长度<code>400</code></li></ul>

<div id="ref_3dcoordinate"></div>

<h4>3D坐标函数</h4>

<p><code>3D</code>坐标系的<code>y</code>轴则是与<code>2D</code>坐标系没有关联的新轴，<code>ht.Node</code>上增加了<code>getElevation()</code>和<code>setElevation(elevation)</code>函数，
控制<code>Node</code>图元中心位置所在<code>3D</code>坐标系的<code>y</code>轴位置。同时增加了<code>getTall()</code>和<code>setTall(tall)</code>函数，控制<code>Node</code>图元在<code>y</code>轴的长度。</p>

<p>为了避免<code>2D</code>和<code>3D</code>坐标系的混乱，以及设置<code>3D</code>图元位置大小的方便，<code>HT</code>为<code>ht.Node</code>图元增加了以下新函数：</p>

<ul><li><code>setPosition3d(x, y, z)|setPosition3d([x, y, z])</code>，可传入<code>x, y, z</code>三个参数，或传入<code>[x, y, z]</code>的数组</li><li><code>getPosition3d()</code>的新函数，返回<code>[x, y, z]</code>数组值，即<code>[getPosition().x, getElevation(), getPosition().y]</code></li><li><code>setSize3d(x, y, z)|setSize3d([x, y, z])</code>，可传入<code>x, y, z</code>三个参数，或传入<code>[x, y, z]</code>的数组</li><li><code>getSize3d()</code>的新函数，返回<code>[x, y, z]</code>数组值，即<code>[getWidth(), getTall(), getHeight()]</code></li></ul>

<div id="ref_3drotation"></div>

<h4>3D旋转函数</h4>

<p><code>ht.Node</code>在<code>2D</code>坐标系下由<code>getRotation()</code>和<code>setRotation(rotation)</code>函数控制旋转，该参数对应于<code>3D</code>坐标系下沿<code>y</code>轴的负旋转值。
同时<code>3D</code>坐标系下增加了<code>rotationX</code>和<code>rotationZ</code>两个分别沿着<code>x</code>轴和<code>z</code>轴的新旋转变量，同时增加以下新函数：</p>

<ul><li><code>setRotationY(y)</code>设置沿<code>y</code>轴旋转弧度，相当于<code>setRotation(-y)</code></li><li><code>getRotationY()</code>获取沿<code>y</code>轴旋转弧度，相当于<code>-getRotation()</code></li><li><code>setRotation3d(x, y, z)|setRotation3d([x, y, z])</code>，可传入<code>x, y, z</code>三个参数，或传入<code>[x, y, z]</code>的数组</li><li><code>getRotation3d()</code>的新函数，返回<code>[x, y, z]</code>数组值，即<code>[getRotationX(), -getRotation(), getRotationZ()]</code></li></ul>

<p>对于旋转还有个很重要的参数<code>rotationMode</code>，该参数通过<code>getRotationMode()|setRotationMode(&#39;xzy&#39;)</code>进行设置，
旋转的先后顺序会影响最终效果，该参数用于指定旋转的先后顺序，默认值为<code>xzy</code>，用户可通过设置以下六种参数改变旋转顺序模式：</p>

<ul><li><code>xyz</code>：先进行<code>x</code>轴旋转，再进行<code>y</code>轴旋转，最后进行<code>z</code>轴旋转。</li><li><code>xzy</code>：先进行<code>x</code>轴旋转，再进行<code>z</code>轴旋转，最后进行<code>y</code>轴旋转。</li><li><code>yxz</code>：先进行<code>y</code>轴旋转，再进行<code>x</code>轴旋转，最后进行<code>z</code>轴旋转。</li><li><code>yzx</code>：先进行<code>y</code>轴旋转，再进行<code>z</code>轴旋转，最后进行<code>x</code>轴旋转。</li><li><code>zxy</code>：先进行<code>z</code>轴旋转，再进行<code>x</code>轴旋转，最后进行<code>y</code>轴旋转。</li><li><code>zyx</code>：先进行<code>z</code>轴旋转，再进行<code>y</code>轴旋转，最后进行<code>x</code>轴旋转。</li></ul>

<div id="ref_3dabbreviation"></div>

<h4>3D简写函数</h4>

<p><code>HT</code>对常用函数有不少简写方式，例如<code>getDataModel()|dm()</code>，<code>getSelectionModel()|sm()</code>等，同样<code>3D</code>也有不少便捷的简写函数：</p>

<ul><li><code>setPosition3d(x, y, z)|setPosition3d([x, y, z])</code>可简写为<code>p3(x, y, z)|p3([x, y, z])</code> </li><li><code>getPosition3d()</code>可简写为<code>p3()</code></li><li><code>setSize3d(x, y, z)|setSize3d([x, y, z])</code>可简写为<code>s3(x, y, z)|s3([x, y, z])</code> </li><li><code>getSize3d()</code>可简写为<code>s3()</code></li><li><code>setRotation3d(x, y, z)|setRotation3d([x, y, z])</code>可简写为<code>r3(x, y, z)|r3([x, y, z])</code> </li><li><code>getRotation3d()</code>可简写为<code>r3()</code></li></ul>

<div id="ref_projection"></div>

<h3>3D投影</h3>

<p><a href="http://en.wikipedia.org/wiki/3D_projection">3D投影</a>是一种将三维空间的点映射到二维平面的算法，
既<code>3D</code>空间的内容投影到<code>2D</code>屏幕坐标的过程，不同的投影算法会最终产生不同的屏幕内容显示效果，
<code>HT</code>支持透视投影<a href="http://en.wikipedia.org/wiki/Perspective_projection">Perspective Projection</a>
和正交投影<a href="http://en.wikipedia.org/wiki/Orthographic_projection">Orthographic Projection</a>这两种最主常用的投影算法。
<code>Graph3dView</code>组件默认采用透视投影，通过<code>Graph3dView#setOrtho(true)</code>可切换到正交投影。</p>

<p><img src=""></p>

<div id="ref_perspective"></div>

<h4>透视投影</h4>

<p>透视投影是为了获得接近真实三维物体的视觉效果而在二维的纸或者画布平面上绘图或者渲染的一种方法，它也称为透视图。
透视使得远的对象变小，近的对象变大，平行线会出现先交等更更接近人眼观察的视觉效果。</p>

<p><img src=""></p>

<p>如上图所示，透视投影最终显示到屏幕上的内容只有截头锥体( <a href="http://en.wikipedia.org/wiki/Viewing_frustum">View Frustum</a> )部分的内容，
因此<code>Graph3dView</code>提供了<code>eye</code>, <code>center</code>, <code>up</code>, <code>far</code>，<code>near</code>，<code>fovy</code>和<code>aspect</code>参数来控制截头锥体的具体范围：</p>

<ul><li><code>getEye()|setEye([x, y, z])</code>，决定眼睛（或<code>Camera</code>）所在位置，默认值为<code>[0, 300, 1000]</code></li><li><code>getCenter()|setCenter([x, y, z])</code>，决定目标中心点（或<code>Target</code>）所在位置，默认值为<code>[0, 0, 0]</code></li><li><code>getUp()|setUp([x, y, z])</code>，决定摄像头正上方向，该参数一般较少改动，默认值为<code>[0, 1, 0]</code></li><li><code>getNear()|setNear(near)</code>，决定近端截面位置，默认值为<code>10</code></li><li><code>getFar()|setFar(far)</code>，决定远端截面位置，默认值为<code>10000</code></li><li><code>getFovy()|setFovy(fovy)</code>，<a href="http://en.wikipedia.org/wiki/Field_of_view">fovy</a>决定垂直方向的视觉张角弧度，默认值为<code>Math.PI/4</code></li><li><code>getAspect()|setAspect(aspect)</code>，决定截头锥体的宽高比，该参数默认自动根据屏幕的宽高比决定，一般不需要设置。</li></ul>

<p><code>near</code>和<code>far</code>虽可根据实际场景任意调节，但建议在可接受的范围内，尽量让<code>near</code>和<code>far</code>越接近越好，
有助于避免<a href="http://en.wikipedia.org/wiki/Z-fighting">Z-fighting</a>的精度问题。</p>

<p><img src=""></p>

<div id="ref_orthographic"></div>

<h4>正交投影</h4>

<p>正交投影也叫正交视图，在这种投影方式下，不管远近物体看起来都是同样大小，屏幕成像让人感觉与人眼观察效果不一样。
正交投影在建模过程很有用，它提供了对场景更“技术”的视觉，让它易于绘制和判断比例。</p>

<p><img src=""></p>

<p>正交投影具有和<a href="#ref_perspective">透视投影</a>一样的大部分参数，但没有<code>fovy</code>参数，取而代之的是<code>orthoWidth</code>参数：</p>

<ul><li><code>isOrtho()|setOrtho(ortho)</code>，决定是否为正交投影，默认值为<code>false</code></li><li><code>getOrthoWidth()|setOrthoWidth(orthoWidth)</code>，决定宽度，即<code>left</code>和<code>right</code>之间的距离，默认值为<code>2000</code></li></ul>

<hr/>

<div id="ref_3dmodel"></div>

<h2>3D模型</h2>

<p><code>HT</code>提供了多种基础形体类型供用户建模使用，不同于传统的3D建模方式，<code>HT</code>的建模核心都是基于<code>API</code>的接口方式，
通过<code>HT</code>预定义的图元类型和参数接口，进行设置达到三维模型的构建，以下章节将介绍预定义的3D模型类型及设置参数，
另外可参考<a href="../../plugin/modeling/ht-modeling-guide.html">建模手册</a>和
<a href="../../plugin/obj/ht-obj-guide.html">OBJ手册</a>介绍的更多自定义扩展模型方式。</p>

<div id="ref_cube"></div>

<h3>六面体</h3>

<p>六面体是由六个面形成的立方体，是<code>HT</code>系统中最常被使用的基本图元类型，默认当构建一个<code>ht.Node</code>对象时显示的就是一个六面体，
六个面的整体参数可以通过<code>style</code>属性的<code>all.*</code>控制，例如<code>all.color</code>设置为<code>red</code>，那么所有六个面默认颜色都会变成红色，
如果需要具体面独立设置，则可以通过<code>left.*|right.*|top.*|bottom.*|front.*|back.*</code>具体面参数控制，
例如<code>left.color</code>设置为<code>blue</code>，那么左侧面将显示为红色，如果<code>left.color</code>设置为空，则<code>HT</code>会采用<code>all.color</code>的值。</p>

<ul><li><code>all.light</code>：默认值为<code>true</code>，六面是否受光线影响，受光线影响时正面看时最亮，侧面看时变暗</li><li><code>all.visible</code>：默认值为<code>true</code>，六面是否可见，该参数不会影响<a href="#ref_part">附属部件</a></li><li><code>all.color</code>：默认值为<code>#3498DB</code>，六面颜色</li><li><code>all.image</code>：默认值为<code>undefined</code>，六面贴图，优先级高于<code>all.color</code></li><li><code>all.blend</code>：默认值为<code>undefined</code>，六面染色颜色，优先级高于<code>all.color</code>，如果有贴图时，则对贴图染色</li><li><code>all.opacity</code>：默认值为<code>undefined</code>，六面透明度，值范围<code>0~1</code>，一般有透明度时需要将<code>all.transparent</code>设置为<code>true</code></li><li><code>all.reverse.flip</code>：默认值为<code>false</code>，六面的反面是否显示正面的内容</li><li><code>all.reverse.color</code>：默认值为<code>#868686</code>，六面的反面颜色，即立方体内部面颜色</li><li><code>all.reverse.cull</code>：默认值为<code>false</code>，六面的反面是否可见，即立方体内部面是否显示，一般六面闭合立方体，可不显示以提高性能</li><li><code>all.transparent</code>：默认值为<code>false</code>，六面是否透明，若<code>color|image|opacity</code>属性出现透明区域情况下，一般需设置为<code>true</code></li><li><code>all.discard.selectable</code>：默认值为<code>true</code>，代表贴图透明度低到被剔除的部分也能点击选中，可设置为<code>false</code>则被剔除部分不可选中</li></ul>

<p>默认情况下贴图会将整个图片填充满对应的面，但很多情况下贴图需要偏移一定位置，有时地板砖需要<code>Tile</code>方式平铺，有时贴图需要翻转，
甚至有时贴图的布局需要动态变化以达到流动等特效，这种情况下就需要定制<a href="http://en.wikipedia.org/wiki/UV_mapping">UV Mapping</a>，
通过<code>uv</code>参数告诉<code>HT</code>如何将图片根据需要自定义贴到面上：</p>

<ul><li><code>all.uv.offset</code>：默认值为<code>undefined</code>，六面贴图的<code>uv</code>偏移，格式为<code>[0.5, 0.5]</code>，分别为水平和垂直方向的偏移量</li><li><code>all.uv.scale</code>：默认值为<code>undefined</code>，六面贴图的<code>uv</code>缩放，格式为<code>[3, 2]</code>，分别为水平和垂直的贴图倍数</li><li><code>all.uv</code>：默认值为<code>undefined</code>，六面自定义<code>uv</code>参数，下面为几种常见需求的自定义<code>uv</code>参数供参考<ul><li>为空采用默认值：<code>[0,0, 0,1, 1,1, 1,0]</code></li><li>左旋转<code>90</code>度：<code>[1,0,  0,0, 0,1, 1,1]</code></li><li>右旋转<code>90</code>度：<code>[0,1, 1,1, 1,0, 0,0]</code></li><li>右旋转<code>180</code>度：<code>[1,1, 1,0, 0,0, 0,1]</code></li><li>左旋转<code>180</code>度：<code>[0,1, 0,0, 1,0, 1,1]</code></li><li>上下翻转：<code>[0,1, 0,0, 1,0, 1,1]</code></li><li>左右翻转：<code>[1,0, 1,1, 0,1, 0,0]</code></li></ul></li></ul>

<p><img src=""></p>

<p><iframe src="examples/example_cube.html" style="height:300px"></iframe>                  </p>

<div id="ref_shape3d"></div>

<h3>shape3d</h3>

<p><code>HT</code>在<code>GraphView</code>的<code>2D</code>图形上，呈现各种图形是通过<code>style</code>的<code>shape</code>属性决定，类似的<code>HT</code>在<code>3D</code>上提供了<code>shape3d</code>属性，
预定义了多种<code>3D</code>的形体。<code>shape3d</code>的默认值为<code>undefined</code>，图元显示为上章节介绍的六面立体图形，当<code>shape3d</code>指定值时，
则显示为<code>shape3d</code>指定的形体，其余的具体参数通过<code>shape3d.*</code>进行设置：</p>

<ul><li><code>shape3d</code>：默认值为<code>undefined</code>，为空时显示为六面立方体，其他可选值为：<ul><li><code>box</code>：立方体，不同于默认的六面体，立方体类型的六个面颜色和贴图只能相同，绘制性能比默认六面体高    </li><li><code>sphere</code>：球体，可通过<code>shape3d.side</code>分成多片，结合<code>shape3d.side.from</code>和<code>shape3d.side.to</code>可形成半球体等    </li><li><code>cone</code>：锥体，可通过<code>shape3d.side</code>形成三角锥、四角锥等形状</li><li><code>torus</code>：圆环，可通过<code>shape3d.side</code>分成多片，结合<code>shape3d.side.from</code>和<code>shape3d.side.to</code>可形成半圆环等</li><li><code>cylinder</code>：圆柱，可通过<code>shape3d.top.*</code>和<code>shape3d.bottom.*</code>可控制顶面和底面的参数</li><li><code>star</code>：星形体，可通过<code>shape3d.top.*</code>和<code>shape3d.bottom.*</code>可控制顶面和底面的参数</li><li><code>rect</code>：矩形体，可通过<code>shape3d.top.*</code>和<code>shape3d.bottom.*</code>可控制顶面和底面的参数</li><li><code>roundRect</code>：圆矩形体，可通过<code>shape3d.top.*</code>和<code>shape3d.bottom.*</code>可控制顶面和底面的参数</li><li><code>triangle</code>：三角形体，可通过<code>shape3d.top.*</code>和<code>shape3d.bottom.*</code>可控制顶面和底面的参数</li><li><code>rightTriangle</code>：直角三角形体，可通过<code>shape3d.top.*</code>和<code>shape3d.bottom.*</code>可控制顶面和底面的参数</li><li><code>parallelogram</code>：平行四边形体，可通过<code>shape3d.top.*</code>和<code>shape3d.bottom.*</code>可控制顶面和底面的参数</li><li><code>trapezoid</code>：梯形体，可通过<code>shape3d.top.*</code>和<code>shape3d.bottom.*</code>可控制顶面和底面的参数</li></ul></li><li><code>shape3d.color</code>：默认值为<code>#3498DB</code>，<code>3d</code>图形整体颜色</li><li><code>shape3d.top.color</code>：默认值为<code>undefined</code>，<code>3d</code>图形顶面颜色</li><li><code>shape3d.bottom.color</code>：默认值为<code>undefined</code>，<code>3d</code>图形底面颜色</li><li><code>shape3d.from.color</code>：默认值为<code>undefined</code>，<code>3d</code>图形起始面颜色</li><li><code>shape3d.to.color</code>：默认值为<code>undefined</code>，<code>3d</code>图形结束面颜色</li><li><code>shape3d.image</code>：默认值为<code>undefined</code>，<code>3d</code>图形整体贴图</li><li><code>shape3d.top.image</code>：默认值为<code>undefined</code>，<code>3d</code>图形顶面贴图</li><li><code>shape3d.bottom.image</code>：默认值为<code>undefined</code>，<code>3d</code>图形底面贴图</li><li><code>shape3d.from.image</code>：默认值为<code>undefined</code>，<code>3d</code>图形起始面贴图</li><li><code>shape3d.to.image</code>：默认值为<code>undefined</code>，<code>3d</code>图形结束面贴图</li><li><code>shape3d.light</code>：默认值为<code>true</code>，<code>3d</code>图形是否受光线影响</li><li><code>shape3d.side</code>：默认值为<code>0</code>，决定<code>3d</code>图形显示为几边型，为<code>0</code>时显示为平滑的曲面效果</li><li><code>shape3d.side.from</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形起始边位置</li><li><code>shape3d.side.to</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形结束边位置</li><li><code>shape3d.visible</code>：默认值为<code>true</code>，决定<code>3d</code>图形是否可见，该参数不影响<code>label</code>，<code>note</code>和<code>icons</code>等其他部分元素</li><li><code>shape3d.from.visible</code>：默认值为<code>true</code>，决定<code>3d</code>图形起始面是否可见</li><li><code>shape3d.to.visible</code>：默认值为<code>true</code>，决定<code>3d</code>图形结束面是否可见</li><li><code>shape3d.top.visible</code>：默认值为<code>true</code>，决定<code>3d</code>图形顶面是否可见</li><li><code>shape3d.bottom.visible</code>：默认值为<code>true</code>，决定<code>3d</code>图形底面是否可见</li><li><code>shape3d.torus.radius</code>：默认值为<code>0.17</code>，决定3d圆环形管半径</li><li><code>shape3d.resolution</code>：默认值为<code>24</code>，决定<code>3d</code>图形精确度，和<code>side</code>类似但决定不同的方向的分段，数值越大越均匀但影响性能</li><li><code>shape3d.blend</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形的染色</li><li><code>shape3d.opacity</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形的透明度，值范围<code>0~1</code></li><li><code>shape3d.reverse.flip</code>：默认值为<code>false</code>，决定<code>3d</code>图形的反面是否显示正面的内容</li><li><code>shape3d.reverse.color</code>：<code>#868686</code>，决定<code>3d</code>图形的反面颜色</li><li><code>shape3d.reverse.cull</code>：默认值为<code>false</code>，决定<code>3d</code>图形的反面是否显示，隐藏背面可提高性能</li><li><code>shape3d.transparent</code>：默认值为<code>false</code>，决定<code>3d</code>图形是否透明</li><li><code>shape3d.uv.offset</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形整体贴图的<code>uv</code>偏移，格式为<code>[0.5, 0.5]</code></li><li><code>shape3d.uv.scale</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形整体贴图的<code>uv</code>缩放，格式为<code>[3, 2]</code></li><li><code>shape3d.top.uv.offset</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形顶面贴图的<code>uv</code>偏移，格式为<code>[0.5, 0.5]</code></li><li><code>shape3d.top.uv.scale</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形顶面贴图的<code>uv</code>缩放，格式为<code>[3, 2]</code></li><li><code>shape3d.bottom.uv.offset</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形底面贴图的<code>uv</code>偏移，格式为<code>[0.5, 0.5]</code></li><li><code>shape3d.bottom.uv.scale</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形底面贴图的<code>uv</code>缩放，格式为<code>[3, 2]</code></li><li><code>shape3d.from.uv.offset</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形起始面贴图的<code>uv</code>偏移，格式为<code>[0.5, 0.5]</code></li><li><code>shape3d.from.uv.scale</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形起始面贴图的<code>uv</code>缩放，格式为<code>[3, 2]</code></li><li><code>shape3d.to.uv.offset</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形结束面贴图的<code>uv</code>偏移，格式为<code>[0.5, 0.5]</code></li><li><code>shape3d.to.uv.scale</code>：默认值为<code>undefined</code>，决定<code>3d</code>图形结束面贴图的<code>uv</code>缩放，格式为<code>[3, 2]</code></li><li><code>shape3d.discard.selectable</code>：默认值为<code>true</code>，整体贴图透明度低到被剔除的部分也能选中，设为<code>false</code>则被剔除部分不可选</li><li><code>shape3d.top.discard.selectable</code>：默认值为<code>true</code>，顶部贴图透明度低到被剔除的部分也能选中，设为<code>false</code>则被剔除部分不可选</li><li><code>shape3d.bottom.discard.selectable</code>：默认值为<code>true</code>，底部贴图透明度低到被剔除的部分也能选中，设为<code>false</code>则被剔除部分不可选</li><li><code>shape3d.from.discard.selectable</code>：默认值为<code>true</code>，起始面贴图透明度低到被剔除的部分也能选中，设为<code>false</code>则被剔除部分不可选</li><li><code>shape3d.to.discard.selectable</code>：默认值为<code>true</code>，结束面贴图透明度低到被剔除的部分也能选中，设为<code>false</code>则被剔除部分不可选</li></ul>

<p><iframe src="examples/example_shape3d.html" style="height:300px"></iframe></p>

<div id="ref_edge"></div>

<h3>ht.Edge</h3>

<p><code>ht.Edge</code>在<code>GraphView</code>的拓扑组件中作为连接节点的连线是重要的图元类型，同样在<code>Graph3dView</code>组件中依然具备<code>2D</code>连线的展示功能，
并且实现空间的三维连线效果，同时也增加了些针对<code>3D</code>的连线参数，连线在三维空间呈现默认是非立体方式，
通过设置<code>style</code>为<code>cylinder</code>可呈现为管状的立体线效果，构建连线的常用参数说明如下：</p>

<ul><li><code>edge.color</code>：连线颜色</li><li><code>edge.width</code>：连线宽度</li><li><code>edge.gradient.color</code>：连线渐进色，目前仅在<code>3D</code>上连线的非立体方式下支持，会在连线的<code>target</code>端呈现此渐进色</li><li><code>edge.source.t3</code>：连线<code>source</code>端偏移，<code>[tx, ty, tz]</code>格式，默认为空</li><li><code>edge.target.t3</code>：连线<code>target</code>端偏移，<code>[tx, ty, tz]</code>格式，默认为空</li></ul>

<p>当<code>edge.type</code>为<code>points</code>类型时，设置到<code>edge.points</code>的拐点参数兼容<code>2D</code>的<code>{x: 100, y: 100}</code>的<code>JSON</code>格式，
同时<code>3D</code>上引入新的参数<code>e</code>代表<code>elevation</code>的海拔高度，因此<code>3D</code>支持<code>{x: 10, y: 20, e: 30}</code>的拐点参数格式，
此拐点代表在<code>x</code>轴<code>10</code>，<code>y</code>轴<code>30</code>，<code>z</code>轴<code>20</code>的位置点。</p>

<p>当<code>style</code>为<code>cylinder</code>时连线呈现立体管线效果，这时候控制连线显示效果的参数都在<code>shape3d.*</code>上，
同时增加了<code>repeat.uv.length</code>参数，该参数默认为空，如果设置了长度值，则贴图会根据连线长度自动调节连线方向上的贴图倍数。</p>

<p>参见<a href="../../core/shape/ht-shape-guide.html#ref_polyline">形状手册</a>的空间管线章节</p>

<div id="ref_shape"></div>

<h3>ht.Shape</h3>

<p>参见<a href="../../core/shape/ht-shape-guide.html">形状手册</a>  </p>

<div id="ref_other"></div>

<h2>其他参数</h2>

<div id="ref_whole"></div>

<h3>整体</h3>

<ul><li><code>brightness</code>：默认值为<code>undefined</code>，整体图形在<code>3D</code>下的亮度，大于<code>1</code>代表更亮，小于<code>1</code>代表更暗，<code>1</code>则代表不变化</li><li><code>opacity</code>：默认值为<code>undefined</code>，整体图形在<code>3D</code>下的透明度，值范围<code>0~1</code></li><li><code>transparent.mask</code>：默认值为<code>false</code>，该属性能使得图元不绘制显示在界面上，但依然可以点击选中</li></ul>

<div id="ref_label"></div>

<h3>文字</h3>

<p><code>2D</code>的<code>label.*</code>文字属性对于<code>3D</code>依然试用，<code>3D</code>也支持内置的第二个<code>label2.*</code>文字，同时增加了以下针对<code>3D</code>空间摆放以及呈现特性的属性参数：</p>

<ul><li><code>label.face</code>： 默认值为<code>front</code>，文字在<code>3D</code>下的朝向，可取值<code>left|right|top|bottom|front|back|center</code></li><li><code>label.t3</code>： 默认值为<code>undefined</code>，文字在<code>3D</code>下的偏移，格式为<code>[x,y,z]</code></li><li><code>label.r3</code>： 默认值为<code>undefined</code>，文字在<code>3D</code>下的旋转，格式为<code>[rotationX,rotationY,rotationZ]</code></li><li><code>label.rotationMode</code>：默认值为<code>xzy</code>，文字在<code>3D</code>下的沿三个轴旋转先后顺序，可取值<code>xyz|xzy|yxz|yzx|zxy|zyx</code></li><li><code>label.light</code>： 默认值为<code>false</code>，文字在<code>3D</code>下是否受光线影响</li><li><code>label.blend</code>： 默认值为<code>undefined</code>，文字在<code>3D</code>下染色颜色</li><li><code>label.opacity</code>： 默认值为<code>undefined</code>，文字在<code>3D</code>下的透明度，值范围<code>0~1</code></li><li><code>label.reverse.flip</code>： 默认值为<code>false</code>，文字在<code>3D</code>下反面是否显示正面的内容</li><li><code>label.reverse.color</code>： 默认值为<code>#868686</code>，文字在<code>3D</code>下反面的颜色</li><li><code>label.reverse.cull</code>： 默认值为<code>false</code>，文字在<code>3D</code>下反面是否显示，隐藏背面可提高性能</li><li><code>label.transparent</code>： 默认值为<code>false</code>，文字在<code>3D</code>下是否透明</li><li><code>label.autorotate</code>： 默认值为<code>false</code>，文字在<code>3D</code>下是否自动朝向眼睛的方向</li><li><code>label.texture.scale</code>：默认值为<code>2</code>，该值代表内存实际生成贴图的倍数，不宜设置过大否则影响性能，
参见<a href="../../core/position/ht-position-guide.html#ref_3d">位置手册</a>例子</li></ul>

<div id="ref_note"></div>

<h3>标注</h3>

<p><code>2D</code>的<code>note.*</code>标注属性对于<code>3D</code>依然试用，<code>3D</code>也支持内置的第二个<code>note.*</code>标注，同时增加了以下针对<code>3D</code>空间摆放以及呈现特性的属性参数：</p>

<ul><li><code>note.face</code>：默认值为<code>front</code>，标注在<code>3D</code>下的朝向，可取值<code>left|right|top|bottom|front|back|center</code></li><li><code>note.t3</code>：默认值为<code>undefined</code>，标注在<code>3D</code>下的偏移，格式为<code>[x,y,z]</code></li><li><code>note.r3</code>：默认值为<code>undefined</code>，标注在<code>3D</code>下的旋转，格式为<code>[rotationX,rotationY,rotationZ]</code></li><li><code>note.rotationMode</code>：默认值为<code>xzy</code>，标注在<code>3D</code>下的沿三个轴旋转先后顺序，可取值<code>xyz|xzy|yxz|yzx|zxy|zyx</code></li><li><code>note.light</code>：默认值为<code>false</code>，标注在<code>3D</code>下是否受光线影响</li><li><code>note.blend</code>：默认值为<code>undefined</code>，标注在<code>3D</code>下染色颜色</li><li><code>note.opacity</code>：默认值为<code>undefined</code>，标注在<code>3D</code>下的透明度，值范围<code>0~1</code></li><li><code>note.reverse.flip</code>：默认值为<code>false</code>，标注在<code>3D</code>下反面是否显示正面的内容</li><li><code>note.reverse.color</code>：默认值为<code>#868686</code>，标注在<code>3D</code>下反面的颜色</li><li><code>note.reverse.cull</code>：默认值为<code>false</code>，标注在<code>3D</code>下反面是否显示，隐藏背面可提高性能</li><li><code>note.transparent</code>：默认值为<code>false</code>，标注在<code>3D</code>下是否透明</li><li><code>note.autorotate</code>：默认值为<code>false</code>，标注在<code>3D</code>下是否自动朝向眼睛的方向</li><li><code>note.texture.scale</code>：默认值为<code>2</code>，该值代表内存实际生成贴图的倍数，不宜设置过大否则影响性能，
参见<a href="../../core/position/ht-position-guide.html#ref_3d">位置手册</a>例子</li></ul>

<div id="ref_icons"></div>

<h3>图标</h3>

<p><code>icons</code>是<code>HT</code>图元扩展上的一个非常有用的属性，利用其可以为图元增加任意多得图标附属部件。
<code>icons</code>内容为<code>style</code>上的<code>icons</code>属性json对象，该对象的结构示例代码如下：</p>

<pre><code>data.setStyle(&#39;icons&#39;, {
   whateverName1: {
       position: 17,
       direction: &#39;north&#39;, // east, west, south, north
       gap: 1,    
       names: [&#39;icon1&#39;, &#39;icon2&#39;, &#39;icon3&#39;]
   },
   whateverName2: {
       position: 20,
       width: 16,
       height: 16,
       name: [&#39;icon5&#39;]
   },
   whateverName3: ...
]);</code></pre>

<p><code>icons</code>可分为很多组，其中<code>whateverName*</code>可理解为组的名称，这个名称<code>HT</code>没有显示也不用于界面呈现效果，用户可以根据自己需要进行命名管理。
直接设置icons对象会冲掉已经设置的图标的副作用，为此<code>HT</code>提供了<code>Data#addStyleIcon(name, json)</code>和<code>Data#removeStyleIcon(name)</code>的函数，
便于控制管理图标增删，因此以上代码也可通过下面代码实现：</p>

<pre><code>data.addStyleIcon(&#39;whateverName1&#39;, {
       position: 17,
       direction: &#39;north&#39;, // east, west, south, north
       gap: 1,    
       names: [&#39;icon1&#39;, &#39;icon2&#39;, &#39;icon3&#39;]
});
data.addStyleIcon(&#39;whateverName2&#39;, {
       position: 20,
       width: 16,
       height: 16,
       name: [&#39;icon5&#39;]
});</code></pre>

<p>从以上示例代码可发现每组图标可为单个图标如<code>whateverName2</code>定义了<code>icon5</code>图标，也可为多个图标的排列，
如<code>whateverName1</code>的<code>[&#39;icon1&#39;, &#39;icon2&#39;, &#39;icon3&#39;]</code>。而<code>json</code>的其他参数为如何摆放和显示这些图标相关：</p>

<ul><li><code>names</code>： 包含多个字符串的数组，每个字符串对应一张图片或矢量(通过<code>ht.Default.setImage</code>注册)</li><li><code>visible</code>：表示该组图片是否显示</li><li><code>for3d</code>：代表该组图片仅用于<code>Graph3dView</code>的组件显示，不显示于<code>GraphView</code>组件</li><li><code>direction</code>： 值为<code>west</code>、<code>east</code>、<code>north</code>、<code>south</code>之一，指定<code>icons</code>的排列方向，默认值为<code>east</code></li><li><code>keepOrien</code>： 旋转<code>Edge</code>时，<code>icons</code>会自动调整方向以保持最好的阅读效果（比如文字），此属性为<code>true</code>表示禁止自动调整方向</li><li><code>gap</code>： 指定同一组中得多个图标之间的距离</li><li><code>width</code>： 指定每个<code>icon</code>的宽度，默认根据注册图片时的宽度</li><li><code>height</code>： 指定每个<code>icon</code>的高度，默认根据注册图片时的高度</li><li><code>face</code>：默认值为<code>front</code>，图标在<code>3D</code>下的朝向，可取值<code>left|right|top|bottom|front|back|center</code></li><li><code>t3</code>：默认值为<code>undefined</code>，图标在<code>3D</code>下的偏移，格式为<code>[x,y,z]</code></li><li><code>r3</code>：默认值为<code>undefined</code>，图标在<code>3D</code>下的旋转，格式为<code>[rotationX,rotationY,rotationZ]</code></li><li><code>rotationMode</code>：默认值为<code>xzy</code>，图标在<code>3D</code>下的沿三个轴旋转先后顺序，可取值<code>xyz|xzy|yxz|yzx|zxy|zyx</code></li><li><code>light</code>：如果<code>shape3d</code>为空，则默认值为<code>false</code>，否则默认为<code>true</code>，图标在<code>3D</code>下是否受光线影响</li><li><code>blend</code>：默认值为<code>undefined</code>，图标在<code>3D</code>下染色颜色,</li><li><code>opacity</code>：默认值为<code>undefined</code>，图标在<code>3D</code>下的透明度，值范围<code>0~1</code></li><li><code>reverseFlip</code>：默认值为<code>false</code>，图标在<code>3D</code>下反面是否显示正面的内容</li><li><code>reverseColor</code>：默认值为<code>#868686</code>，图标在<code>3D</code>下反面的颜色</li><li><code>reverseCull</code>：默认值为<code>false</code>，图标在<code>3D</code>下反面是否显示，隐藏背面可提高性能</li><li><code>transparent</code>：默认值为<code>false</code>，图标在<code>3D</code>下是否透明</li><li><code>autorotate</code>：默认值为<code>false</code>，图标在<code>3D</code>下是否自动朝向眼睛的方向</li><li><code>discardSelectable</code>：默认值为<code>true</code>，代表贴图透明度低到被剔除的部分也能点击选中，可设置为<code>false</code>则被剔除部分不可选中</li><li><code>textureScale</code>：默认值为<code>2</code>，该值代表内存实际生成贴图的倍数，不宜设置过大否则影响性能，
参见<a href="../../core/position/ht-position-guide.html#ref_3d">位置手册</a>例子</li><li><code>shape3d</code>：该属性指定显示为<code>3d</code>模型的图标效果，如果设置了该属性则忽略<code>names</code>、<code>width</code>和<code>height</code>属性，
参见<a href="../../core/position/ht-position-guide.html#ref_3d">位置手册</a>例子</li><li><p><code>position</code>： 指定<code>icons</code>的位置，支持的枚举值对应位置如下：</p><pre><code>    34                            35
   1 | 2     38     3     39     4 | 5
 ----6-------40-----7-----41-------8----
   9 | 10    42     11    43    12 | 13
     |                             |
     |              44             |
  14 15 16   45  46 17 47  48   18 19 20
     |              49             |
     |                             |
  21 | 22    50     23     51   24 | 25 
 ----26------52-----27-----53------28---
  29 | 30    54     31     55   32 | 33  
    36                            37</code></pre></li></ul>

<div id="ref_host"></div>

<h3>吸附</h3>

<p>吸附功能对于设计有层次关系的模型非常方便，例如设备面板吸附上设备机框，设备端口吸附上设备面板，这样从机框-面板-端口的层次关系吸附，
使得用户拖动整体机框时所有这个层次下的图元都会跟随移动。对于<code>3D</code>的场景下，吸附的概念更进一步延伸，当机框在三维空间进行任意位置偏移
以及任意角度旋转时，所有吸附的相关图元都会正确的跟随平移，并做出相应位置对应的旋转，以达到整体设备各个图形部分保持物理相对位置一致。</p>

<ul><li><code>Node#getHost()</code>和<code>Node#setHost(node)</code>获取和设置吸附的图元对象</li><li><code>Node#getAttaches()</code>返回目前吸附到该图元的所有对象，返回<code>ht.List</code>链表对象，无吸附对象时返回空</li><li><code>Node#isHostOn(node)</code>判断该图元是否吸附到指定图元对象上</li><li><code>Node#isLoopedHostOn(node)</code>判断该图元是否与指定图元相互形成环状吸附，例如<code>A</code>吸附<code>B</code>，<code>B</code>吸附<code>C</code>，<code>C</code>又吸附回<code>A</code>，则<code>A</code>，<code>B</code>和<code>C</code>图元相互环状吸附</li></ul>

<p><iframe src="examples/example_host.html" style="height:400px"></iframe></p>

<div id="ref_3dview"></div>

<h2>3D组件</h2>

<div id="ref_viewbasic"></div>

<h3>组件基础</h3>

<p><code>HT</code>显示<code>3D</code>视图的组件为<code>ht.graph3d.Graph3dView</code>，其中<code>ht.graph3d</code>为和<code>3D</code>组件相关的类包，<code>Graph3dView</code>为呈现<code>3D</code>视图的组件类。
可类比于<code>2D</code>视图组件<code>ht.graph.GraphView</code>，<code>GraphView</code>和<code>Graph3dView</code>两者可共享同一数据模型<code>DataModel</code>，
在<code>2D</code>和<code>3D</code>的API设计上<code>HT</code>保持了很多一致性。</p>

<p><code>Graph3dView</code>的界面<code>DOM</code>结构是由最底层的<code>DIV</code>元素，以及渲染层<code>CANVAS</code>元素组合而成，通过<code>getView()</code>可得到最底层的<code>DIV</code>元素，
通过<code>getCanvas()</code>可得到渲染层<code>CANVAS</code>元素，<code>HT</code>默认的交互事件都是添加在底层<code>DIV</code>元素上，
用户做自定义交互扩展也可通过直接对<code>getView()</code>返回的元素添加事件监听的方式。</p>

<p>颜色参数在<code>HTML</code>领域是比较灵活，可为<code>#F0F1F2</code>的十六进制格式，可为字符串名<code>red</code>和<code>black</code>等，可为<code>rgb(255,128,32)</code>格式，
可为<code>rgba(255,128,32,0.5)</code>包含透明度的格式。然而<code>WebGL</code>的API接口对于颜色参数的格式，一般要求rgba四个参数的取值范围为<code>0~1</code>的数字格式，
因此<code>Graph3dView</code>组件上的颜色参数默认值为[r,g,b,a]数字数组格式，而考虑到<code>DataModel</code>上的<code>Data</code>数据与<code>2D</code>兼容性，
<code>HT</code>内部会自动对颜色参数进行转换，因此<code>data.s(&#39;all.color&#39;,&#39;red&#39;)</code>与<code>data.s(&#39;all.color&#39;,[1,0,0,1])</code>的方式都是一样的效果。</p>

<div id="ref_light"></div>

<h3>灯光设置</h3>

<p>灯光和雾化等效果请参见<a href="../lighting/ht-lighting-guide.html">灯光手册</a></p>

<div id="ref_gridaxis"></div>

<h3>网格轴线</h3>

<p>为了提供三维空间的坐标参考，<code>Graph3dView</code>预置了现实<code>xz</code>面网格，<code>x</code>、<code>y</code>和<code>z</code>三个方向轴，以及中心点位置的显示功能，
默认这些参数都是关闭不显示状态，可根据需要打开开关，并改变显示参数。</p>

<ul><li><code>getGridSize()|setGridSize(40)</code>，指定网格行列数</li><li><code>getGridGap()|setGridGap(20)</code>，指定网格线间距</li><li><code>getGridColor()|setGridColor([0.4, 0.75, 0.85, 1.0])</code>，指定网格线颜色</li><li><code>isGridVisible()|setGridVisible(true)</code>，指定是否显示网格</li><li><code>isOriginAxisVisible()|setOriginAxisVisible(true)</code>，指定是否显示坐标原点<code>[0,0,0]</code>轴线</li><li><code>isCenterAxisVisible()|setCenterAxisVisible(true)</code>，指定是否显示目前中心点轴线</li><li><code>getAxisXColor()|setAxisXColor([1.0, 0.0, 0.0, 1.0])</code>，指定<code>x</code>轴线颜色</li><li><code>getAxisYColor()|setAxisYColor([0.0, 1.0, 0.0, 1.0])</code>，指定<code>y</code>轴线颜色</li><li><code>getAxisZColor()|setAxisZColor([0.0, 0.0, 1.0, 1.0])</code>，指定<code>z</code>轴线颜色</li></ul>

<div id="ref_3dinteraction"></div>

<h3>3D交互</h3>

<div id="ref_interactionmode"></div>

<h4>交互基础</h4>

<div id="ref_defaultmode"></div>

<h5>默认模式</h5>

<p><code>3D</code>的交互与<code>2D</code>有很大的区别，默认<code>Graph3dView</code>提供的是围绕<code>Graph3dView#getCenter()</code>中心点旋转的操作模式，
这种模式下进行<code>Drag</code>操作时会改变<code>Graph3dView#getEye()</code>的眼睛观察点位置，鼠标滚轮或触屏<code>pinch</code>缩放的效果，
实质也是改变<code>eye</code>位置，使其更接近或者更远离<code>center</code>中心位置，最终达到视觉缩放或者走近和远离物体的效果。</p>

<ul><li>鼠标操作：左键<code>drag</code>围绕中心旋转；按下<code>shift</code>键则进行<code>pan</code>方式的手抓图；滚轮进行走近和远离中心；
右键<code>drag</code>时上下位置变化影响前进后退，左右位置变化影响左右平移。</li><li>触屏交互：单指拖拽进行围绕中心点旋转；双指头拿捏进行<code>pinch</code>方式的缩放；三指头拖拽进行<code>pan</code>方式平移。</li></ul>

<div id="ref_firstpersonmode"></div>

<h5>第一人称模式</h5>

<p><code>Graph3dView</code>还提供了第一人称的漫游交互模型，该模式同时改变<code>eye</code>和<code>center</code>的位置，
通过<code>Graph3dView#setFirstPersonMode(true)</code>可切换为第一人称模式，这种模式下操作就行人或车在行进的效果：</p>

<ul><li>鼠标操作：左键点击不松开，则进行前进操作；右键点击不松开，则进行后退操作；
整个过程还可以移动鼠标改变前进和后退的方向；按下<code>shift</code>键则进行<code>pan</code>方式的手抓图，即改变上下左右位置。滚轮则进行上下位置调节。</li><li>触屏操作：单指点击不松开，则进行前进操作；双指点击不松开，则进行后退操作；
整个过程还可以移动指头改变前进和后退的方向；三指头<code>drag</code>拖拽则进行<code>pan</code>方式的手抓图，即改变上下左右位置。</li></ul>

<p>在第一人称模式下，还可设置<code>Graph3dView#setMouseRoamable(true|false)</code>参数，该参数默认值为<code>true</code>，如果设置为<code>false</code>，
则鼠标左键右键都不支持前进后退的操作功能，但左键可拖拽编辑图元，右键可改变视角方向，采用这样的方式一般会结合键盘<code>w|s|a|d</code>按键进行漫游操作。</p>

<div id="ref_interactionfunc"></div>

<h4>交互函数</h4>

<p><code>HT</code>的交互函数一般都有是否起动画的参数<code>anim</code>，该参数可为<code>boolean</code>类型的简单<code>true|false</code>，也可为<code>json</code>对象，
当为<code>json</code>对象时则代表启动动画，同时<code>json</code>对象上的属性则用于控制动画相关的参数，以下示例代码片段供参考：</p>

<pre><code>g3d.walk(distance, {
    frames: 50,
    interval: 30,
    easing: function(t) {return t; },
    finishFunc: function() {
        forwardIndex += 1;
        if (points.length - 2 &gt; forwardIndex) {
            g3d.setCenter([point2.x, 1600, point2.y]);
            setTimeout(function() {
                g3d.rotate(Math.PI / 2, 0, {
                    frames: 30,
                    interval: 30,
                    easing: function(t) {return t;},
                    finishFunc:function() {forward();}
                });
            }, 60);
        } else {
            var lastPoint = points[points.length  - 1];
            g3d.setCenter([lastPoint.x, 1400, lastPoint.y]);
            setTimeout(function() {
                g3d.rotate(-Math.PI / 2, 0, {
                    frames: 30,
                    interval: 30,
                    finishFunc: function() {
                        window.isAnimationRunning = false;
                    }
                });

            }, 60);
        }
    }
});</code></pre>

<p>虽然<code>3D</code>交互本质主要就是改变<code>eye</code>和<code>center</code>这两个位置参数，但直接操作三维坐标点还是太原始晦涩，
<code>Graph3dView</code>提供了以下跟简单直观的函数操作方式：</p>

<ul><li><p><code>setZoom(increment, anim)</code>：缩放操作，默认操作模式意味着<code>eye</code>离<code>center</code>的远近变化，<code>increment</code>为步进的比例，
调用<code>zoomIn(anim)</code>和<code>zoomOut(anim)</code>，等同于调用了<code>setZoom(1.3, anim)</code>和<code>setZoom(1/1.3, anim)</code>。
如果在<code>Graph3dView#isOrtho()</code>为<code>true</code>的正交投影情况下，缩放意味着改变<code>Graph3dView#setOrthoWidth(width)</code>的可视宽度范围。</p></li><li><p><code>pan(dx, dy, anim, firstPersonMode)</code>：上下左右四个方向的平移，本质为<code>eye</code>和<code>center</code>同时做四个方向的相同偏移量，
<code>dx</code>左右偏移参数，<code>dy</code>上下偏移参数，<code>dx</code>和<code>dy</code>一般代表屏幕移动像素，<code>Graph3dView</code>自动会换算成合理的<code>3D</code>空间逻辑坐标偏移量。
<code>firstPersonMode</code>参数为空时则默认采用<code>Graph3dView#isFirstPersonMode()</code>当前值，
如果为第一人称模式调用<code>pan</code>操作，该函数会考虑<code>Graph3dView#getBoundaries()</code>边界限制。</p></li><li><p><code>rotate(leftRight, upDown, anim, firstPersonMode)</code>：上下左右四个方位旋转一定角度，<code>leftRight</code>水平旋转弧度，<code>upDown</code>垂直旋转弧度，
<code>firstPersonMode</code>参数为空时则默认采用<code>Graph3dView#isFirstPersonMode()</code>当前值，该参数将影响旋转移动的参照标准，为默认非第一人称模式时，
旋转是以<code>center</code>为中心进行旋转，也就是围绕中心物体旋转，当为第一人称时旋转以<code>eye</code>为中心进行旋转，也就是旋转眼睛朝向方向。</p></li><li><p><code>walk(step, anim, firstPersonMode)</code>：该函数同时改变<code>eye</code>和<code>center</code>的位置，也就是<code>eye</code>和<code>center</code>在两点建立的矢量方向上同时移动相同的偏移量。
<code>step</code>为偏移的矢量长度值。<code>firstPersonMode</code>参数为空时则默认采用<code>Graph3dView#isFirstPersonMode()</code>当前值，
如果为第一人称模式调用<code>walk</code>操作，该函数会考虑<code>Graph3dView#getBoundaries()</code>边界限制。</p></li><li><p><code>reset()</code>：复位函数，调用该函数将<code>eye</code>、<code>center</code>和<code>up</code>三个变量设置为<code>ht.Default</code>上对应的
<code>graph3dViewCenter</code>、<code>graph3dViewEye</code>和<code>graph3dViewUp</code>初始默认值。</p></li></ul>

<div id="ref_switch"></div>

<h4>交互开关</h4>

<p>默认情况下以下参数都是开启状态，即可通过鼠标或键盘进行以下交互操作，可根据需求进行开关设置：</p>

<ul><li><code>isRotatable()|setRotatable(true)</code>，控制是否可旋转 </li><li><code>isZoomable()|setZoomable(true)</code>，控制是否可缩放 </li><li><code>isPannable()|setPannable(true)</code>，控制是否可平移 </li><li><code>isWalkable()|setWalkable(true)</code>，控制是否可进退 </li><li><code>isResettable()|setResettable(true)</code>，控制是否可按空格键复位</li><li><code>isRectSelectable()|setRectSelectable(true)</code>，控制是否可框选</li></ul>

<div id="ref_keyboard"></div>

<h4>键盘操作</h4>

<p><code>Graph3dView</code>预置了很多键盘操作功能</p>

<ul><li><code>w</code>：前进，如果同时按下<code>shift</code>键则为上移</li><li><code>s</code>：后退，如果同时按下<code>shift</code>键则为下移</li><li><code>a</code>：左移</li><li><code>d</code>：右移</li><li>左方向键：第一人称模式左旋转</li><li>右方向键：第一人称模式右旋转</li><li>上方向键：第一人称模式上旋转</li><li>下方向键：第一人称模式下旋转</li><li><code>ctrl</code>或<code>command</code>键：进行框选</li><li><code>space</code>空格键：调用<code>reset()</code>进行复位</li><li><code>shift</code>键：按住<code>shift</code>键盘时，默认操作变成<code>pan</code>的平移效果</li></ul>

<p><code>Graph3dView</code>默认情况下移动图元是沿着<code>xz</code>平面移动，当按住以下键时将改变移动模式：</p>

<ul><li>按住<code>shift</code>键，或者同时按下<code>x</code>、<code>y</code>和<code>z</code>键时，则进行<code>xyz</code>三维空间的移动</li><li>同时按下<code>x</code>和<code>y</code>键时，则进行沿<code>xy</code>平面的移动</li><li>同时按下<code>x</code>和<code>z</code>键时，则进行沿<code>xz</code>平面的移动</li><li>同时按下<code>y</code>和<code>z</code>键时，则进行沿<code>yz</code>平面的移动</li><li>仅按下<code>x</code>键时，则进行沿<code>x</code>轴方向的移动</li><li>仅按下<code>y</code>键时，则进行沿<code>y</code>轴方向的移动</li><li>仅按下<code>z</code>键时，则进行沿<code>z</code>轴方向的移动</li></ul>

<p>通过键盘改变移动模式的默认实现逻辑在<code>getMoveMode(event, data)</code>函数里，该函数默认实现逻辑如下，
如果最后选中的图元的<code>style</code>属性<code>3d.move.mode</code>指定了值，则不再考虑键盘状态而采用该设置值：</p>

<pre><code>getMoveMode: function(event, data){
    var movemode = data.s(&#39;3d.move.mode&#39;);
    if(movemode){
        return movemode;
    }
    var map = ht.Default.getCurrentKeyCodeMap(),
        x = &#39;88&#39;,
        y = &#39;89&#39;,
        z = &#39;90&#39;;
    if(event.shiftKey || (map[x] &amp;&amp; map[y] &amp;&amp; map[z])) return &#39;xyz&#39;;        
    if(map[x] &amp;&amp; map[y]) return &#39;xy&#39;;        
    if(map[x] &amp;&amp; map[z]) return &#39;xz&#39;;        
    if(map[y] &amp;&amp; map[z]) return &#39;yz&#39;;        
    if(map[x]) return &#39;x&#39;;        
    if(map[y]) return &#39;y&#39;;      
    if(map[z]) return &#39;z&#39;;       
    return &#39;xz&#39;;
},</code></pre>

<p>可参考<a href="#ref_host">吸附章节例子</a>中，将移动模式设置为沿<code>xyz</code>三维空间移动的代码：</p>

<pre><code>g3d.getMoveMode = function(event){
    return &#39;xyz&#39;;
};</code></pre>

<div id="ref_interactionlistener"></div>

<div id="ref_edit"></div>

<h4>图元编辑</h4>

<p>默认情况下图元在三维场景即可拖拽沿着<code>xz</code>平面移动，或<a href="#ref_keyboard">结合键盘</a>实现任意空间方向移动，但结合键盘毕竟不够直观易用，
同时图元还有三个轴方向的旋转角度，三个轴方向的大小尺寸等参数需要可控，即需要修改<code>p3</code>、<code>s3</code>和<code>r3</code>参数的编辑功能。</p>

<p>为此<code>HT</code>提供了直观的解决方案，当<code>Graph3dView#setEditable(true)</code>处于编辑状态时，最后一个选中的图元将呈现如下的，
由图元中心延伸出来的三个轴方向的标示条，每个轴方向的标示条又分为三段：</p>

<ul><li>第一段：离中心较近较长的为第一段，用于改变该轴方向的位置</li><li>第二段：黄色标示的为中间段，用于改变该轴方向的图元大小，按住<code>shift</code>键可同时同比例改变三个轴方向大小</li><li>第三段：离中心点最远的为第三段，用于沿着该轴方向的旋转，双击该段会复位旋转角度为<code>0</code></li></ul>

<p>参见<a href="#ref_filter">过滤器章节</a>，控制图元是否允许移动、旋转和改变大小。</p>

<p><img src=""></p>

<h4>交互监听</h4>

<p>通过<code>Graph3dView#addInteractorListener</code>可监听交互过程：</p>

<pre><code>g3d.addInteractorListener(function(e){
    console.log(e.kind);
});</code></pre>

<p>其中回调事件<code>e.kind</code>参数类型如下：</p>

<ul><li><code>beginRotate</code>：开始旋转</li><li><code>betweenRotate</code>：旋转过程</li><li><code>endRotate</code>：结束旋转</li><li><code>beginWalk</code>：开始行进</li><li><code>betweenWalk</code>：行进过程</li><li><code>endWalk</code>：结束行进</li><li><code>beginZoom</code>：开始缩放</li><li><code>betweenZoom</code>：缩放过程</li><li><code>endZoom</code>：结束缩放</li><li><code>beginPan</code>：开始平移</li><li><code>betweenPan</code>：平移过程</li><li><code>endPan</code>：结束平移</li><li><code>beginPinch</code>：开始双指缩放</li><li><code>betweenPinch</code>：双指缩放过程</li><li><code>endPinch</code>：结束双指缩放</li><li><code>toggleNote</code>：双击在<code>note</code>上</li><li><code>toggleNote2</code>：双击在<code>note2</code>上</li><li><code>clickData</code>：单击图元</li><li><code>clickBackground</code>：单击背景</li><li><code>doubleClickData</code>：双击图元</li><li><code>doubleClickBackground</code>：双击背景</li><li><code>beginEditRotation</code>: 开始编辑图元旋转角度</li><li><code>betweenEditRotation</code>: 正在编辑图元旋转角度</li><li><code>endEditRotation</code>: 结束编辑图元旋转角度</li><li><code>beginEditSize</code>: 开始编辑图元大小</li><li><code>betweenEditSize</code>: 正在编辑图元大小</li><li><code>endEditSize</code>: 结束编辑图元大小</li><li><code>beginMove</code>: 开始移动图元</li><li><code>betweenMove</code>: 正在移动图元</li><li><code>endMove</code>: 结束移动图元</li><li><code>beginRectSelect</code>: 开始框选图元</li><li><code>betweenRectSelect</code>: 正在框选图元</li><li><code>endRectSelect</code>: 结束框选图元</li></ul>

<p>当单击或双击在图元上时，返回事件除了<code>e.kind</code>外，还有<code>e.part</code>参数提供了具体点击图元哪个部位的信息：</p>

<ul><li><code>body</code>：图片的中心部分</li><li><code>label</code>：图元文字标签</li><li><code>label2</code>：图元第二个文字标签</li><li><code>note</code>：图元冒泡标注</li><li><code>label2</code>：图元第二个冒泡标注</li><li><code>icons</code>上的<code>key</code>：代表一组图标</li><li><code>edit_tx</code>：编辑状态下，标示改变<code>x</code>轴位置部分</li><li><code>edit_ty</code>：编辑状态下，标示改变<code>y</code>轴位置部分</li><li><code>edit_tz</code>：编辑状态下，标示改变<code>z</code>轴位置部分</li><li><code>edit_rx</code>：编辑状态下，标示改变<code>x</code>轴旋转部分</li><li><code>edit_ry</code>：编辑状态下，标示改变<code>y</code>轴旋转部分</li><li><code>edit_rz</code>：编辑状态下，标示改变<code>z</code>轴旋转部分</li><li><code>edit_sx</code>：编辑状态下，标示改变<code>x</code>轴大小部分</li><li><code>edit_sy</code>：编辑状态下，标示改变<code>y</code>轴大小部分</li><li><code>edit_sz</code>：编辑状态下，标示改变<code>z</code>轴大小部分</li></ul>

<p><iframe src="examples/example_interaction.html" style="height:400px"></iframe></p>

<div id="ref_collision"></div>

<h4>碰撞检测</h4>

<p><code>HT</code>不但提供<a href="#ref_firstpersonmode">第一人称漫游交互模式</a>，还支持漫游过程对墙面等阻挡物的碰撞检测功能。
通过碰撞检测可以限制第一人称漫游的允许范围。漫游操作一般沿着<code>xz</code>平面进行，因此<code>HT</code>提供了定义<code>xz</code>平面上的多线，
用来描述不可超越的漫游边界。</p>

<p>通过<code>Graph3dView#setBoundaries(boundaries)</code>可指定碰撞边界，<code>boundaries</code>的格式如下：</p>

<pre><code>g3d.setBoundaries([
    [
        p0.x, p0.y,
        p1.x, p1.y,
        p2.x, p2.y,
        p3.x, p3.y            
    ],
    [
        p4.x, p4.y,
        p5.x, p5.y,
        p6.x, p6.y            
    ]
]);    </code></pre>

<p>以上代码设置了两条折线<code>p0-p1-p2-p3</code>和<code>p4-p5-p6</code>，每条折线由一个数组描述所有端点，数组的第一和第二元素表示起始点的<code>x,z</code>坐标，
接下来依次是第二、第三等端点的<code>x,z</code>坐标，可理解为第一个端点为<code>MoveTo</code>其他图元依次进行<code>LineTo</code>围成的边界。</p>

<p>以下示例代码用到了<code>ht.Default.toBoundaries(data.getPoints(), data.getSegments())</code>的函数，
该函数可将不连续的曲线转化成微分的直线线段。代码利用<code>GraphView#addTopPainter</code>，
将<code>3D</code>的<code>eye</code>和<code>center</code>的位置方向信息实时绘制在<code>2D</code>，以便直观理解当前第一人称所在位置和朝向。</p>

<p><iframe src="examples/example_collision.html" style="height:500px"></iframe> </p>

<div id="ref_selection"></div>

<h3>选中状态</h3>

<p><code>Graph3dView</code>中被选中的图元会显示为较暗的状态，变暗系数是由图元<code>style</code>的<code>brightness</code>和<code>select.brightness</code>属性决定，
<code>select.brightness</code>属性默认值为<code>0.7</code>，最终返回值大于<code>1</code>变亮，小于<code>1</code>变暗，等于<code>1</code>或为空则不变化。</p>

<p><code>Graph3dView#getBrightness</code>函数控制最终图元亮度，因此也可以通过重载覆盖该函数自定义选中图元亮度，以下为默认逻辑：</p>

<pre><code>getBrightness: function(data){
    var brightness = data.s(&#39;brightness&#39;),
        selectBrightness = this.isSelected(data) ? data.s(&#39;select.brightness&#39;) : null;

    if(brightness == null){
        return selectBrightness;
    }
    if(selectBrightness == null){
        return brightness;
    }
    return brightness * selectBrightness;        
},</code></pre>

<p><code>Graph3dView#getWireframe</code>函数用于定义图元立体线框效果，默认实现代码如下，
由实现代码可知通过控制<code>wf.*</code>（<code>wf</code>为<code>wireframe</code>的简称）相关参数即可实现显示选中线框的效果。</p>

<pre><code>getWireframe: function(data){
    var visible = data.s(&#39;wf.visible&#39;);
    if(visible === true || (visible === &#39;selected&#39; &amp;&amp; this.isSelected(data))){
        return {
            color: data.s(&#39;wf.color&#39;),
            width: data.s(&#39;wf.width&#39;),
            short: data.s(&#39;wf.short&#39;),
            mat: data.s(&#39;wf.mat&#39;)
        };
    }
},</code></pre>

<ul><li><code>wf.visible</code>：默认为<code>false</code>代表不显示，可设置为<code>selected</code>值代表选中时才显示，或<code>true</code>值代表一直显示线框</li><li><code>wf.color</code>：线框颜色</li><li><code>wf.short</code>：默认值为<code>false</code>代表显示封闭的立体线框，设置为<code>true</code>则显示不封闭的短线框</li><li><code>wf.width</code>：线框宽度，默认值为<code>1</code>，有些系统下只能显示<code>1</code>的效果，不同系统能显示的最大值也都有限制</li><li><code>wf.mat</code>：默认值为空，可通过<code>ht.Default.createMatrix</code>构建转换矩阵，参见<a href="../../plugin/form/examples/example_unboxing.html"> Unboxing 例子</a></li></ul>

<div id="ref_filter"></div>

<h3>过滤器</h3>

<div id="ref_selectable"></div>

<h4>选择过滤器</h4>

<p>默认情况所有图元都是可选中，用户可通过设置选择过滤器取消部分图元的可选中功能，
可否选中的最终控制在<code>SelectionModel</code>模型的<code>filterFunc</code>过滤器上，也可通过重载<code>GraphView</code>的<code>isSelectable</code>函数，
或调用<code>GraphView.setSelectableFunc(func)</code>的封装函数控制，示例代码如下：</p>

<pre><code>graph3dView.setSelectableFunc(function(data){
    return data.a(&#39;selectable&#39;);
});</code></pre>

<div id="ref_visible"></div>

<h4>可见过滤器</h4>

<p>默认情况图元都是可见，用户可通过设置可见过滤器隐藏部分图元，示例代码如下：</p>

<pre><code>graph3dView.setVisibleFunc(function(data){
    return data.s(&#39;all.transparent&#39;) === true;
});</code></pre>

<p>该示例代码逻辑为：只显示<code>all.transparent</code>为<code>true</code>的图元。
<code>Graph3dView#isVisible</code>函数最终决定图元是否可见，因此也可通过直接重载覆盖该函数自定义：</p>

<pre><code>graph3dView.isVisible = function(data){
    return data.s(&#39;all.transparent&#39;) === true;
};</code></pre>

<div id="ref_movable"></div>

<h4>移动过滤器</h4>

<p>默认情况图元都是可移动，用户可通过设置移动过滤器固定部分图元，示例代码如下：</p>

<pre><code>graph3dView.setMovableFunc(function(data){
    return movableItem.selected;
});</code></pre>

<p>该示例代码逻辑为：当<code>movableItem</code>的<code>selected</code>为<code>true</code>时图元才允许移动。
<code>Graph3dView#isMovable</code>函数最终决定图元可否移动，因此也可通过直接重载覆盖该函数自定义：</p>

<pre><code>graph3dView.isMovable = function(data){
    return movableItem.selected;
};</code></pre>

<div id="ref_rotatable"></div>

<h4>旋转过滤器</h4>

<p>当<code>Graph3dView#setEditable(true)</code>设置为可编辑的情况下，默认选中图元允许旋转，可通过如下代码禁止部分图元旋转：</p>

<pre><code>graph3dView.setRotationEditableFunc(function(data){
    return data instanceof ht.Shape;
});</code></pre>

<p>以上代码的逻辑为：只允许<code>ht.Shape</code>类型的图元可以旋转。
<code>Graph3dView#isRotationEditable</code>函数最终决定图元可否旋转，因此也可通过直接重载覆盖该函数自定义：</p>

<pre><code>graph3dView.isRotationEditable: function(data){
    return data instanceof ht.Shape;
},</code></pre>

<div id="ref_scalable"></div>

<h4>改变大小过滤器</h4>

<p>当<code>Graph3dView#setEditable(true)</code>设置为可编辑的情况下，默认选中图元允许改变大小，可通过如下代码禁止部分图元旋转：</p>

<pre><code>graph3dView.setSizeEditableFunc(function(data){
    return data instanceof ht.Shape;
});</code></pre>

<p>以上代码的逻辑为：只允许<code>ht.Shape</code>类型的图元可以改变大小。
<code>Graph3dView#isSizeEditable</code>函数最终决定图元可否改变大小，因此也可通过直接重载覆盖该函数自定义：</p>

<pre><code>graph3dView.isSizeEditable: function(data){
    return data instanceof ht.Shape;
},</code></pre>

<p>除在视图组件上设置过滤器外，<code>GraphView</code>和<code>Graph3dView</code>的内置过滤机制也参考了以下<code>style</code>属性，用户可直接改变以下<code>style</code>达到对单个图元的控制效果：</p>

<ul><li><code>2d.visible</code>：默认值为<code>true</code>，控制图元在<code>GraphView</code>上是否可见</li><li><code>2d.selectable</code>：默认值为<code>true</code>，控制图元在<code>GraphView</code>上是否可选中</li><li><code>2d.movable</code>：默认值为<code>true</code>，控制图元在<code>GraphView</code>上是否可移动</li><li><code>2d.editable</code>：默认值为<code>true</code>，控制图元在<code>GraphView</code>上是否可编辑</li><li><code>2d.move.mode</code>：默认值为空，控制图元移动范围，可设置为如下参数：    <ul><li><code>xy</code>：可在<code>xy</code>平面移动 </li><li><code>x</code>：仅沿<code>x</code>轴移动 </li><li><code>y</code>：仅沿<code>y</code>轴移动 </li><li>任何其他非空值代表不可移动</li></ul></li><li><code>3d.visible</code>：默认值为<code>true</code>，控制图元在<code>Graph3dView</code>上是否可见</li><li><code>3d.selectable</code>：默认值为<code>true</code>，控制图元在<code>Graph3dView</code>上是否可选中</li><li><code>3d.movable</code>：默认值为<code>true</code>，控制图元在<code>Graph3dView</code>上是否可移动</li><li><code>3d.editable</code>：默认值为<code>true</code>，控制图元在<code>Graph3dView</code>上是否可编辑</li><li><code>3d.move.mode</code>：默认值为空，参见<a href="#ref_keyboard">键盘操作</a>，控制图元移动范围，可设置为如下参数：<ul><li><code>xyz</code>：可在三维空间移动</li><li><code>xy</code>：仅在<code>xy</code>平面移动 </li><li><code>xz</code>：仅在<code>xz</code>平面移动</li><li><code>yz</code>：仅在<code>yz</code>平面移动</li><li><code>x</code>：仅沿<code>x</code>轴移动 </li><li><code>y</code>：仅沿<code>y</code>轴移动 </li><li><code>z</code>：仅沿<code>z</code>轴移动 </li><li>任何其他非空值代表不可移动</li></ul></li></ul>

<div id="ref_export"></div>

<h3>导出</h3>

<ul><li><code>toCanvas(background)</code>：导出当前视图内容成一个<code>Canvas</code>组件，<code>background</code>为背景颜色</li><li><code>toDataURL(background)</code>：导出当前视图内容为<a href="http://en.wikipedia.org/wiki/Data_URI_scheme">base64</a>格式的字符串图片内容，<code>background</code>为背景颜色</li></ul>

<p>导出例子片段：</p>

<pre><code>{
    label: &#39;Export Image&#39;,
    action: function(){                             
        var w = window.open();
        w.document.open();                            
        w.document.write(&quot;&lt;img src=&#39;&quot; + g3d.toDataURL(g3d.getView().style.background) + &quot;&#39;/&gt;&quot;);
        w.document.close();
    }
}</code></pre>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
